<template>
  <el-container class="container">
    <!-- 侧边栏 -->
    <el-aside :width="asideWidth" class="aside">
      <div class="logo-container">
        <img src="@/assets/logo.png" alt="Logo" class="logo" />
        <span v-show="!isCollapse" class="logo-title">Honey2024</span>
      </div>
      <el-menu
          :collapse="isCollapse"
          background-color="#001529"
          text-color="#fff"
          active-text-color="#ffd04b"
          :default-active="$route.path"
      >
        <el-menu-item index="/">
          <i class="el-icon-s-home"></i>
          <span slot="title">系统首页</span>
        </el-menu-item>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>信息管理</span>
          </template>
          <el-menu-item index="/user">用户管理</el-menu-item>
          <el-menu-item index="/admin">管理员管理</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <!-- 主内容区域 -->
    <el-container class="main-container">
      <!-- 顶部导航 -->
      <el-header class="header">
        <i :class="collapseIcon" class="collapse-icon" @click="handleCollapse"></i>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="header-right">
          <i class="el-icon-full-screen full-screen-icon"   @click="handleFull"></i>
          <el-dropdown>
            <span class="el-dropdown-link" >
              <img src="@/assets/logo.png" alt="User Avatar" class="avatar" />管理员
            </span>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 内容展示区域 -->
      <el-main class="content">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      isCollapse: true,
      asideWidth: '200px',
      collapseIcon: 'el-icon-s-fold'
    };
  },
  methods: {
    handleFull() {
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        document.documentElement.requestFullscreen();
      }
    },
    handleCollapse() {
      this.isCollapse = !this.isCollapse;
      this.asideWidth = this.isCollapse ? '64px' : '200px';
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold';
    },
    logout() {
      console.log('退出登录');
    }
  }
};
</script>

<style scoped>

/* 容器样式 */
.container {
  display: flex;
  height: 100vh;
  background-color: #f0f2f5;
}

/* 侧边栏 */
.aside {
  background-color: #001529;
  transition: width 0.3s;
}

/* Logo区域样式 */
.logo-container {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.logo {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.logo-title {
  font-size: 20px;
  color: white;
  transition: all 0.3s;
}

/* 菜单项样式 */
.el-menu {
  background-color: #001529 !important;
}
.el-menu-item {
  color: white;
}
.el-menu-item:hover,
.el-menu-item.is-active {
  background-color: #1890ff !important;
}

/* 顶部导航 */
.header {
  background-color: #001529;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.collapse-icon {
  font-size: 26px;
  cursor: pointer;
}

/* 面包屑导航 */
.breadcrumb {
  margin-left: 20px;
  color: white;
}

/* 顶部右侧图标和下拉菜单 */
.header-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.full-screen-icon{
  font-size: 30px;
  cursor: pointer;
  margin-top: 10px;
}
.avatar {
  width: 40px;
  height: 40px;
  margin-left: 15px;
  cursor: pointer;
  margin-top: 10px;
}

/* 主内容区 */
.content {
  padding: 20px;
  background-color: #f0f2f5;
  width: 100%;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .aside {
    width: 64px !important;
  }
  .logo-title {
    display: none;
  }
}
</style>